<template>
  <!-- 表格模块-->
  <div class="tableRow" v-click-outside="closeMenu">
    <el-row class="select-list" >
      <el-col>
          <el-select ref="unitSelect"  v-model="models.workId" size="small" @change="workSelectHandler"
            placeholder="请选择调查任务">
            <el-option v-for="item in workList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-tree
            @node-contextmenu="handleNodeContextMenu"
            :data="dialog.treeData"
            node-key="id"
            ref="areaTree"
            default-expand-all
            :expand-on-click-node="false"
            :props="dialog.permissionProps"
            @node-click="handleCheckChange"
            >
            <template slot-scope="{ data }" class="custom-tree-node">
              <span style="font-size: 14px">{{ data.label }} {{data.code}}</span>
            </template>
          </el-tree>
      </el-col>
    </el-row>
    <el-popover
        v-model="showMenu"
        :style="{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px`,position:'absolute' }"
        trigger="manual"
        @click="closeMenu"
    >
      <div class="p-menu">
        <div class="p-menu-item" @click="refreshData">
          刷新
        </div>
        <div class="p-menu-item" @click="addRelation" v-if="currentNode && currentNode.level >3">
          关联
        </div>
        <div class="p-menu-item" @click="addChild">
          新增
        </div>
        <div class="p-menu-item" @click="editNode">
          编辑
        </div>
        <div class="p-menu-item" @click="handleDelete">
          删除
        </div>
      </div>
    </el-popover>
    <add-modal ref="addModal" :is-edit="isTreeEdit" @success="getUserAreaList(workId)"/>
  </div>
</template>

<!-- 脚本模块  -->
<script lang="ts">
import {Component, Vue, Emit, Prop, Ref, Watch} from 'vue-property-decorator';

import {publishAdnStartList} from '@/api/investWork';
import {userWorkAreaTreeSelectDataHasCode} from '@/api/areaManager';
import AddModal from "@/components/Area/AddModal.vue";
import {removeArea} from "@/api/area";
import {Getter} from "vuex-class";
@Component({components: {
    AddModal
  }})

export default class AreaOfWork extends Vue {
  @Ref('addModal') private addModal: any;
  @Prop()
  private isEdit!: any;

  @Getter('areaLevel') private areaLevel: any;
  isTreeEdit = false;
  currentNode:any;
  menuPosition = { x: 0, y: 0 }
  showMenu = false
  models:any = {
    workId:'',
    areaId:'',
    areaLevel:'',
    areaCode:'',
    bigCategoryId:'',
    areaData:{}
  }
  workList:any =  {};
  workCodeMap:any={};
  //实际上保存的是地市级别的
  workId=''

  dialog:any={
    treeData:[],
    permissionProps: {
      children: 'children',
      label: 'label'
    }
  }

  getModels(){
     return this.models;
  }

  handleCheckChange(data, checked, indeterminate) {
      this.models.areaId = data.id;
      this.models.areaCode = data.code;
      this.models.areaLevel = data.level;
      this.models.areaData = data;
      this.selectedHandler(this.models);
      this.closeMenu()
  }


  @Emit('selected')
  selectedHandler(val){
    return val;
  }


  getWorkLit(){
    publishAdnStartList().then(res =>{
      if(res && res.data){
          this.workList = res.data;
          this.workList.forEach((w:any) =>{
          this.workCodeMap[w.id] = w.code;
        })
      }
    }).catch(e =>{
      console.error(e);
    });
  }

  workSelectHandler(workId:any){
    this.getUserAreaList(workId)
  }

  getUserAreaList(workId:any){
    this.workId = workId
    userWorkAreaTreeSelectDataHasCode({'workId': workId,'areaLevel':this.areaLevel}).then(res =>{
      if(res && res.data){
          this.dialog.treeData = res.data;
         
         
      }
    }).catch(e =>{
      this.dialog.treeData = {};
    });
  }

  handleNodeContextMenu(event, data) {
    if(this.isEdit){
      event.preventDefault();
      this.currentNode = data;
      this.showMenu = true;
      this.menuPosition = { x: event.clientX, y: event.clientY };
    }
  }

  closeMenu() {
    this.showMenu = false;
  }

  addChild() {
    this.showMenu = false
    this.isTreeEdit = false
    this.$nextTick(()=>{
      this.addModal.show(this.currentNode)
    })
  }


  refreshData(){

    if(this.currentNode){
      (this as any).$bus.$emit('areaVectorRefresh',this.currentNode);
    }
    this.closeMenu();
  
  }



  @Emit('addRelation')
  addRelation(){
    return this.currentNode.id
  }
  editNode() {
    this.showMenu = false
    this.isTreeEdit = true
    this.$nextTick(()=>{
      this.addModal.show(this.currentNode)
    })
  }
  handleDelete() {
    this.$confirm('确定要删除该区域吗？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      return removeArea({'ids': [this.currentNode.id]});
    }).then((response: any) => {
      this.$emit('success')
      this.getUserAreaList(this.workId);
      this.$message.success(response.msg);
    }).catch((e) => {
      console.error(e);
    });
  }

  @Watch('areaLevel')
  areaLevelChange(level){
    if(this.workId && level){
      this.getUserAreaList(this.workId);
    }
  
  }
  mounted() {
    this.getWorkLit();
    (this as any).$bus.$on('workAreaUpdate',(item:any) =>{
      this.getUserAreaList(this.workId);
    });
  }
}
</script>
<style scoped lang="scss">
.tableRow{
  padding: 10px;
  background: #FFFFFF;
}
.p-menu{
  display: flex;
  flex-direction: column;
  .p-menu-item{
    padding: 6px 0;
    font-size: 14px;
    color:#009688;
    text-align: center;
    border-bottom: 1px solid #c1eae9;
    cursor: pointer;
    &:hover{
      background: #c1eae9;
    }
  }
}
</style>

